<template>
	<view class="describe">
			<navBar :title="ownerCode === 'xm' ? '工程项选择': '物料选择'"></navBar>
			<view class="box">
				<searchCom class="search-input " v-model="searchText" style="margin-top: 120rpx;" @enter="determine"
					@change="searchChange"></searchCom>
			</view>
			<view class="table-container">
				<view class="top-header">
					<view class="h-num">序号</view>
					<view class="h-code">{{ownerCode==='xm' ? '编码' : '物料编码'}}</view>
					<view class="h-desc">{{ownerCode==='xm' ? '工程项' : '物料描述'}}</view>
				</view>
				<view class="content-box" v-for="(it,i) in list" :key="i" :class="i%2 === 0 ? '' : 'color-grid'" @click="choose(it)">
					<view class="num">
						<text>{{i+1}}</text>
					</view>
					<view class="code">{{it.code}}</view>
					<view class="desc">{{it.makt}}</view>
				</view>
			</view>
	</view>
</template>

<script>
	import {
		diseaseMaterialList, // 物料描述
	} from '@/api/engineeringMaintenance/maintenanceTask.js'
	import searchCom from "@/components/searchCom.vue"
	export default{
		name:'describe',
		components: {
			searchCom
		
		},
		data(){
			return{
				searchText:undefined,
				list:[],
				ownerCode:undefined
			}
		},
		mounted() {
			this.describe()
			this.ownerCode = uni.getStorageSync('ownerCode')
		},
		methods:{
			/**
			 * 输入框值变化的时候
			 * @param {String} val
			 */
			searchChange(val) {
				this.searchText = val
				if(this.searchText === '') {
					this.searchText = undefined
				}
				this.describe()
			
			},
			determine(ev) {
				console.log(ev)
			},
			choose(e){
				 const eventChannel = this.getOpenerEventChannel();
				  uni.navigateBack({
				  	success: () => {
				  		  eventChannel.emit('setData', {data: e});
				  	}
				  });
			},
			// 物料描述
			describe(){
				let param = { 
					currPage:1,
					pageSize:9999,
					params:{
						projectId:uni.getStorageSync('isOwner'),
						queryStr:this.searchText || null
					}
				}
				diseaseMaterialList(param).then(res =>{
					if (res.status === 1 && res.success) {
						this.list = res.result.list
				}})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.describe{
		/* #ifdef MP-WEIXIN */
			padding-top: 190rpx;
		/* #endif */
		.box{
			padding: 0 30rpx;
		}
		.table-container {
			margin-top: 20rpx;
		}
		.top-header {
			display: flex;
			// justify-content: space-between;
			align-items: center;
			padding:10rpx 40rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #445469;
			.h-num {
				width: 100rpx;
			}
			.h-code {
				width: 200rpx;
				text-align: center;
			}
			.h-desc {
				width: 500rpx;
				text-align: center;
			}
		}
		.content-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-top: 1rpx dashed #f0f0f0;
			.num {
				width: 130rpx;
				text-align: center;
				text {
					display: inline-block;
					width: 36rpx;
					height:36rpx;
					line-height: 36rpx;
					text-align: center;
					background-color:#a9c0df ;
					color: white;
				}
			}
			.code {
				width: 200rpx;
				word-wrap: break-word
			}
			.desc {
				width: 500rpx;
				padding-left: 20rpx;
			}
		}
		.color-grid {
			background: #F5F7FA;
		}
	}
</style>